<template>
  <div id="bacGermDict">
    <div class="bodyContent">

      <!-- vxe-toolbar -->
      <Splitpanes class="area">
        <Pane size="60">
          <vxe-toolbar perfect>
            <template #buttons>
              <vxe-input v-model="form.keyvalue" type="search" clearable class="vxeInputSearch" placeholder="关键字查询" @keydown="keyEnter" @search-click="findList" @clear="findList"></vxe-input>
              <vxe-button type="text" class="button-blue" icon="vxe-icon-refresh" content="刷新" :loading="showLoading" @click="findList"></vxe-button>
              <vxe-button type="text" class="button-blue" icon="vxe-icon-add" content="新增" @click="addBacGerm"></vxe-button>
              <vxe-button type="text" class="button-red" icon="vxe-icon-delete" content="删除" @click="deleteBacGerm"></vxe-button>
            </template>
          </vxe-toolbar>
          <div class="tableBox">
            <vxe-table ref="tableRef" border="inner" align="left" class="mytable-scrollbar" :loading="showLoading" height="95%" :data="tableData" :row-config="{ isCurrent: true, isHover: true }" :column-config="{ resizable: true }" :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true, enabled: false }" show-header-overflow show-overflow keep-source>
              <vxe-column type="checkbox" width="26"></vxe-column>
              <vxe-column type="seq" title="#" width="30"></vxe-column>
              <vxe-column field="whoCode" title="WHONET编码" width="120" :edit-render="{ autofocus: '.vxe-input--inner' }">
                <template #edit="{ row }">
                  <vxe-input v-model="row.whoCode" clearable placeholder="WHONET编码"></vxe-input>
                </template>
              </vxe-column>
              <vxe-column field="germNo" title="微生物代号" width="120" :edit-render="{ autofocus: '.vxe-input--inner' }">
                <template #edit="{ row }">
                  <vxe-input v-model="row.germNo" clearable placeholder="微生物代号"></vxe-input>
                </template>
              </vxe-column>
              <vxe-column field="germNa" title="微生物名称" width="120" :edit-render="{ autofocus: '.vxe-input--inner' }">
                <template #edit="{ row }">
                  <vxe-input v-model="row.germNa" clearable placeholder="微生物名称"></vxe-input>
                </template>
              </vxe-column>
              <vxe-column field="englishCode" title="微生物英文编码" width="90" :edit-render="{ autofocus: '.vxe-input--inner' }">
                <template #edit="{ row }">
                  <vxe-input v-model="row.englishCode" type="text"></vxe-input>
                </template>
              </vxe-column>
              <vxe-column field="englishName" title="微生物英文名称" width="90" :edit-render="{ autofocus: '.vxe-input--inner' }">
                <template #edit="{ row }">
                  <vxe-input v-model="row.englishName" type="text"></vxe-input>
                </template>
              </vxe-column>
              <vxe-column field="inputCode" title="输入码" width="90" :edit-render="{ autofocus: '.vxe-input--inner' }">
                <template #edit="{ row }">
                  <vxe-input v-model="row.inputCode" type="text"></vxe-input>
                </template>
              </vxe-column>
              <vxe-column field="isCommon" title="是否常见" width="80" align="center">
                <template #default="{ row }">
                  <el-tag :type="getIsStaticTagType(row)">
                    {{ getIsStaticStatusDesc(row) }}
                  </el-tag>
                </template>
              </vxe-column>

              <vxe-column field="standardNa" title="标准名称" width="110" :edit-render="{ autofocus: '.vxe-input--inner' }">
                <template #edit="{ row }">
                  <vxe-input v-model="row.standardNa" type="text"></vxe-input>
                </template>
              </vxe-column>
              <vxe-column field="serumGroup" title="血清型分组" width="70" :edit-render="{ autofocus: '.vxe-input--inner' }">
                <template #edit="{ row }">
                  <vxe-input v-model="row.serumGroup" type="integer"></vxe-input>
                </template>
              </vxe-column>
              <vxe-column field="orgKingdom" title="界" width="70" :edit-render="{ autofocus: '.vxe-input--inner' }">
                <template #edit="{ row }">
                  <vxe-input v-model="row.orgKingdom" type="text"></vxe-input>
                </template>
              </vxe-column>
              <vxe-column field="phylumCode" title="门" width="70" :edit-render="{ autofocus: '.vxe-input--inner' }">
                <template #edit="{ row }">
                  <vxe-input v-model="row.phylumCode" type="text"></vxe-input>
                </template>
              </vxe-column>
              <vxe-column field="orgClass" title="纲" width="70" :edit-render="{ autofocus: '.vxe-input--inner' }">
                <template #edit="{ row }">
                  <vxe-input v-model="row.orgClass" type="text"></vxe-input>
                </template>
              </vxe-column>
              <vxe-column field="orgOrder" title="目" width="100" :edit-render="{ autofocus: '.vxe-input--inner' }">
                <template #edit="{ row }">
                  <vxe-input v-model="row.orgOrder" type="text"></vxe-input>
                </template>
              </vxe-column>

              <vxe-column field="familyCode" title="科" width="100" :edit-render="{ autofocus: '.vxe-input--inner' }">
                <template #edit="{ row }">
                  <vxe-input v-model="row.familyCode" type="text"></vxe-input>
                </template>
              </vxe-column>
              <vxe-column field="genusGroup" title="属" width="100" :edit-render="{ autofocus: '.vxe-input--inner' }">
                <template #edit="{ row }">
                  <vxe-input v-model="row.genusGroup" type="text"></vxe-input>
                </template>
              </vxe-column>
              <vxe-column field="speciesGroup" title="种" width="100" :edit-render="{ autofocus: '.vxe-input--inner' }">
                <template #edit="{ row }">
                  <vxe-input v-model="row.speciesGroup" type="text"></vxe-input>
                </template>
              </vxe-column>
              <vxe-column field="isAnaerobe" title="是否厌氧菌" width="80" align="center">
                <template #default="{ row }">
                  <el-tag :type="getIsStaticTagType1(row)">{{ getIsStaticStatusDesc1(row) }}</el-tag>
                </template>
              </vxe-column>

              <vxe-column field="germType" title="微生物类型" width="100" :edit-render="{ autofocus: '.vxe-input--inner' }">
                <template #edit="{ row }">
                  <vxe-input v-model="row.germType" type="text"></vxe-input>
                </template>
              </vxe-column>
              <vxe-column field="subKingdomCode" title="结合ANAEROBE以及SUBKINGDOM_CODE进行判断" width="100" :edit-render="{ autofocus: '.vxe-input--inner' }">
                <template #edit="{ row }">
                  <vxe-input v-model="row.subKingdomCode" type="text"></vxe-input>
                </template>
              </vxe-column>
              <vxe-column field="remark" title="备注" width="100" :edit-render="{ autofocus: '.vxe-input--inner' }">
                <template #edit="{ row }">
                  <vxe-input v-model="row.remark" type="text"></vxe-input>
                </template>
              </vxe-column>

              <vxe-column field="orgId" title="组织机构" min-width="150">
                <template #edit="{ row }">
                  <vxe-input v-model="row.orgId" type="text"></vxe-input>
                </template>
              </vxe-column>
            </vxe-table>
            <el-pagination :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="page.totalResult" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
          </div>
        </Pane>

        <Pane size="40">
          <el-tabs type="border-card">
            <el-tab-pane label="基本信息">
              <BacGermDictForm ref="bacGermFormRef" :currentRow="currentRow" @findList="findList" />
            </el-tab-pane>
            <ExtraPropertyPanel :busRow="curSlectRow" />
          </el-tabs>
        </Pane>
      </Splitpanes>
    </div>
  </div>
</template>

<script lang="ts" setup>
// 引入组件区 ==========src\views\lab_sys\bac_set\BacGermDict.vue
import { reactive, ref, getCurrentInstance, onMounted } from 'vue';
import { Splitpanes, Pane } from 'splitpanes';
import { VXETable } from 'vxe-table';
import { VxeMessage, VxeNotifyType } from '../../utils/CommonMessage';
import type { VxeTableInstance, VxeTablePropTypes, VxeTableEvents } from 'vxe-table';
import XEClipboard from 'xe-clipboard';
import BacGermDictForm from './StaBacGermDictForm.vue'; //基本信息表单组件
import ExtraPropertyPanel from '@/components/ExtraPropertyPanel.vue';

// 全局变量定义区 ==========
let { proxy }: any = getCurrentInstance();
defineExpose({ initPage });

// 左侧表格:
let showLoading = ref(false); //刷新+表格加载
const form = reactive({ keyvalue: '' }); //根据关键字查询
const tableRef = ref<VxeTableInstance<RowVO>>(); //表格ref标记
const tableData = reactive([]); //表格数据
const curSlectRow = ref({});
// 右侧表单:
const bacGermFormRef = ref<InstanceType<typeof bacGermFormRef>>(); //基本信息表单标记ref
let currentRow: any = reactive({ id: '', code: '' }); //基本信息表单当前行数据
const EditExtraPropertiesRef = ref(null); //配置扩展属性弹框ref

// 分页
let page = reactive({
  currentPage: 1,
  pageSize: 10,
  totalResult: 0
});

// vxe-table 表格右击属性
// const menuConfig = reactive<VxeTablePropTypes.MenuConfig<RowVO>>({
//   header: {
//     options: [
//       [
//         { code: 'hideColumn', name: '隐藏列', disabled: false },
//         { code: 'showAllColumn', name: '取消所有隐藏列', disabled: false }
//       ]
//     ]
//   },
//   body: {
//     options: [
//       [
//         { code: 'copy', name: '复制', prefixIcon: 'vxe-icon-copy', disabled: false },
//         { code: 'reload', name: '刷新', disabled: false },
//         { code: 'remove', name: '删除', disabled: false },
//         { code: 'save', name: '保存', prefixIcon: 'vxe-icon-save', disabled: false }
//       ]
//     ]
//   },
//   visibleMethod({ options, column }) {
//     const isDisabled = !column;
//     options.forEach((list) => {
//       list.forEach((item) => {
//         item.disabled = isDisabled;
//       });
//     });
//     return true;
//   }
// });

// 方法定义区 =============
// onMounted(() => {
//   findList(); // 获取微生物字典数据
// });

function getIsStaticStatusDesc(row) {
  if (row.isCommon) {
    return '是';
  } else {
    return '否';
  }
}

function getIsStaticTagType(row: any) {
  if (row.isCommon) {
    return 'success';
  } else {
    return 'danger';
  }
}

function getIsStaticStatusDesc1(row) {
  if (row.isAnaerobe) {
    return '是';
  } else {
    return '否';
  }
}
function getIsStaticTagType1(row) {
  if (row.isAnaerobe) {
    return 'success';
  } else {
    return 'danger';
  }
}

function keyEnter(e: any) {
  if (e.$event.code == 'Enter') {
    findList();
  }
}

// 获取微生物
function findList() {
  showLoading.value = true;
  tableData.length = 0; //放入数据前清空数据
  const url = '/sta/germ/dict/findGermList';
  proxy.$http
    //注意此处的数据条数
    .get(url, { params: { searchValue: form.keyvalue, pageIndex: page.currentPage, pageSize: page.pageSize } })
    .then(async (res: any) => {
      page.totalResult = res.data.total;
      tableData.push(...res.data.records);
      showLoading.value = false;
      if (res && res.data.records && res.data.records.length > 0) {
        currentRow.id = '';
        tableCellClick({ row: res.data.records[0] });
        const $table = tableRef.value;
        if ($table) {
          await $table.setCurrentRow(res.data.records[0]);
        }
      }
    })
    .catch((err: any) => {
      showLoading.value = false;
      VxeMessage('获取微生物数据异常', VxeNotifyType.error);
    });
}

// 新增微生物
function addBacGerm() {
  const $formRef = bacGermFormRef.value;
  bacGermFormRef.value.addNew();
}

// // 保存微生物
// function saveBarCodeType() {
//   const $formRef = bacGermFormRef.value;
//   bacGermFormRef.value.saveForm((e: any) => {
//     // findList();
//   });
// }
function initPage() {
  findList();
}

// 删除微生物
function deleteBacGerm() {
  const arr = tableRef.value?.getCheckboxRecords(true);
  // const sltTemplates = (proxy.$refs.templateTableRef as any).getCheckboxRecords();
  if (!(arr && arr.length > 0 && arr[0])) {
    VxeMessage('请勾选要删除的数据', VxeNotifyType.info);
  } else {
    proxy
      .$confirm('确定要删除当前勾选的数据？', '提示', {
        cancelButtonClass: 'cancel-button',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(() => {
        const data = { bacGermDictList: arr };
        const url = '/sta/germ/dict/batchDeleteGermDict';
        proxy.$http
          .post(url, data)
          .then((res: any) => {
            VxeMessage(res.status.msg, VxeNotifyType.success);
            findList();
            bacGermFormRef.value?.clearFormData();
          })
          .catch((err: any) => {
            VxeMessage(err, VxeNotifyType.error);
          });
      })
      .catch((err: any) => {
        VxeMessage(err, VxeNotifyType.error);
      });
  }
}

// // 表格右击菜单项
// const contextMenuClickEvent: VxeTableEvents.MenuClick<RowVO> = ({ menu, row, column }) => {
//   const $table = tableRef.value;
//   if ($table) {
//     switch (menu.code) {
//       case 'hideColumn':
//         $table.hideColumn(column);
//         break;
//       case 'showAllColumn':
//         $table.resetColumn(true);
//         break;
//       case 'copy':
//         if (XEClipboard.copy((row as any)[column.field])) {
//           VXETable.modal.message({ content: '已复制到剪贴板！', status: 'success' });
//         }
//         break;
//       case 'reload':
//         findList();
//         break;
//       case 'insertAt':
//         $table.insertAt({}, row || -1).then(({ row }) => {
//           $table.setEditCell(row, column || 'name');
//         });
//         break;
//       case 'remove':
//         deleteBacGerm();
//         break;
//       case 'save':
//         saveBarCodeType();
//         break;
//     }
//   }
// };

// 表格选中当前行
function tableCellClick({ row }: any) {
  curSlectRow.value = row;
  Object.assign(currentRow, row);
  proxy.$forceUpdate();
}

//更换一页显示数量
function handleSizeChange(val) {
  page.pageSize = val;
  findList();
}

// 点击下一页
function handleCurrentChange(val) {
  page.currentPage = val;
  findList();
}
</script>
<style lang="scss" scoped>
#bacGermDict {
  width: 100%;
  height: 100%;

  .bodyContent {
    // 面包屑40px  上下间距10px
    height: calc(100% - 60px);

    .area {
      background-color: $base-white;

      // 附加按钮间距
      .button-blue,
      .button-red {
        margin: 5px 0 5px 5px;
      }

      .tableBox {
        height: calc(100% - 40px);
      }

      .el-tabs--border-card {
        border: none;
        height: 100%;

        :deep(.el-tabs__content) {
          height: calc(100% - 39px - 30px);

          .el-tab-pane {
            height: 100%;
          }
        }
      }
    }
  }
}
</style>
